<template>
  <div class="video-container">
    <video controls class="preview-video">
      <source :src="fileUrl" :type="videoType">
      您的浏览器不支持视频标签
    </video>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  fileUrl: {
    type: String,
    required: true
  },
  fileName: {
    type: String,
    required: true
  },
  getFileExtension: {
    type: Function,
    required: true
  }
});

// 计算视频类型
const videoType = computed(() => {
  const extension = props.getFileExtension(props.fileName);
  // 映射常见视频格式
  const formatMap = {
    'mp4': 'video/mp4',
    'webm': 'video/webm',
    'ogg': 'video/ogg',
    'mov': 'video/quicktime',
    'avi': 'video/x-msvideo',
    'flv': 'video/x-flv',
    'wmv': 'video/x-ms-wmv',
    'm3u8': 'application/x-mpegURL'
  };
  
  return formatMap[extension] || `video/${extension}`;
});
</script>

<style scoped>
.video-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #111827;
  padding: 16px;
}

.preview-video {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .video-container {
    padding: 8px;
    min-height: 70vh;
  }
  
  .preview-video {
    width: 100%;
  }
}
</style> 